function c() {
    var xmlhttp2;
    xmlhttp2=new XMLHttpRequest();
    xmlhttp2.onreadystatechange=function() {
        if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
            console.log(xmlhttp2.responseText);
            var json = JSON.parse(xmlhttp2.responseText);
            console.log(json);
            for(var i = 0 ; i<json.data.length;i++){
                console.log(json.data[i]);
                var li = document.createElement("li");
                li.className = "row";
                var spanN = document.createElement("span");
                spanN.className = "col-5";
                spanN.innerHTML = json.data[i].studentName;
                var spanS = document.createElement("span");
                spanS.innerHTML = json.data[i].sex;
                spanS.className = "col-4";
                var spanA = document.createElement("span");
                spanA.innerHTML = json.data[i].age;
                spanA.className = "col-3";
                li.appendChild(spanN);
                li.appendChild(spanS);
                li.appendChild(spanA);
                document.querySelector("#list").appendChild(li);
            }
        }
    };
    xmlhttp2.open("GET","http://localhost/ajaxApi/public/index.php/index/student/student",true);
    xmlhttp2.send();
}
c();


document.querySelector("#btn").addEventListener("click",function(){
     var n = document.querySelector("#n").value;
     console.log(n);
     var s = document.querySelector("#s").value;
     console.log(s);
     var a = document.querySelector("#a").value;
     console.log(a);

    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.querySelector("#list").innerHTML = "";
            c();
        }
    };
    xmlhttp.open("GET","http://localhost/ajaxApi/public/index.php/index/student/addStudent?studentName="+n+"&sex="+s+"&age="+a,true);
    xmlhttp.send();
 });



